<template>
  <div class="line-wrap" :style="{ width: width, height: height }">
    <div class="line" ref="line"></div>
  </div>
</template>

<script>
/* eslint-disable */
import echarts from "echarts";
export default {
  props: {
    width: {
      default: () => "100%",
    },
    height: {
      default: () => "100%",
    },
    checkedName: {
      default: () => "",
    },
    // toggleIndex: 0,   //  默认legend切换索引
    isShowLegend: {
      type: Boolean,
      default: false,
    },
    legend: {
      type: Array,
      default: () => ["文档", "视频", "图片"],
    },
    xAxis: {
      type: Array,
      default: () => [
        { value: "2020/12/1" },
        { value: "2020/12/2" },
        { value: "2020/12/3" },
        { value: "2020/12/4" },
        { value: "2020/12/5" },
      ],
    },
    grid: {
      type: Object,
      default: () => {
        return {
          left: "4%",
          right: "4%",
          top: "15%",
          bottom: "0%",
          y2: 30,
          containLabel: true,
        };
      },
    },
    value: {
      type: Array,
      default: () => [
        [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
        [320, 460, 301, 334, 390, 550, 320, 100, 50],
        [320, 302, 464, 334, 390, 330, 320, 100, 50],
      ],
    },
    colors: {
      type: Array,
      default: () => [
        [
          "rgba(0, 149, 77, 0.3)",
          "rgba(0, 149, 77, 0)",
          "rgba(0, 149, 77, 0.9)",
        ],
        [
          "rgba(220, 104, 41, 0.3)",
          "rgba(220, 104, 41, 0)",
          "rgba(220, 104, 41, 0.9)",
        ],
        ["rgba(190,56,226,0.3)", "rgba(190,56,226,0)", "rgba(190,56,226,0.9)"],
      ],
    },
    itemStyle: {
      type: Array,
      default: () => [
        {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(90, 141, 238, 1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(171, 196, 247, 1)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          barBorderRadius: [20, 20, 0, 0],
          // shadowColor: "rgba(0,160,221,1)",
          // shadowBlur: 4,
          // borderColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
          //   {
          //     offset: 0,
          //     color: "rgba(245,221,111,1)",
          //   },
          //   {
          //     offset: 1,
          //     color: "rgba(245,221,111,0)",
          //   },
          // ]),
        },
        {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#1390c4", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#0b3f69", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {
              offset: 0,
              color: "#4d69de",
            },
            {
              offset: 1,
              color: "#1b316f",
            },
          ]),
          barBorderRadius: 0,
        },
        {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {
              offset: 0,
              color: "#45a3d9",
            },
            {
              offset: 1,
              color: "#1b4772",
            },
          ]),
          barBorderRadius: 0,
        },
      ],
    },
  },
  data() {
    return {
      option: null,
      chart: null,
    };
  },
  watch: {
    value() {
      this.setOptions();
    },
  },
  methods: {
    setOptions() {
      this.option = {
        title: {
          // text: this.checkedName,
          text:
            this.checkedName.length > 15
              ? this.checkedName.substr(0, 15) + "..."
              : this.checkedName,
          textStyle: {
            color: "rgba(24, 144, 255, 1)",
            fontSize: 16,
          },
          left: "3%",
          top: "2%",
        },
        tooltip: {
          trigger: "axis",
        },
        grid: this.grid,
        legend: {
          show: true,
          // icon: "rect",
          top: "0%",
          // left: "middle",
          itemWidth: 15,
          itemHeight: 15,
          // itemGap: 25,
          data: this.legend,
          textStyle: {
            fontSize: 14,
            color: "rgba(255, 255, 255, 1)",
          },
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#ffffff",
              },
              margin: 15,
            },
            boundaryGap: false,
            data: this.xAxis,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#ddd",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#ffffff",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(54, 61, 82, 0.8)",
              },
            },
          },
        ],
        series: [
          {
            name: this.legend[0],
            type: "line",
            // smooth: true, //是否平滑
            showAllSymbol: true,
            symbol: "circle",
            symbolSize: 6,
            lineStyle: {
              normal: {
                color: "rgba(0, 149, 77, 1)",
                shadowColor: "rgba(0, 0, 0, .3)",
                shadowBlur: 0,
                // shadowOffsetY: 5,
                // shadowOffsetX: 5,
              },
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "rgba(0, 149, 77, 1)",
              },
            },
            itemStyle: {
              color: "rgba(0, 149, 77, 1)",
              borderColor: "#fff",
              borderWidth: 3,
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
            // tooltip: {
            //   show: false,
            // },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0, 149, 77, 0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 149, 77, 0.3)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 149, 77, 0.9)",
                shadowBlur: 20,
              },
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0, 149, 77, 1)",
                    },
                    {
                      offset: 0.4,
                      color: "rgba(0, 149, 77, 1)",
                    },
                    {
                      offset: 0.5,
                      color: "#fff",
                    },
                    {
                      offset: 0.7,
                      color: "#fff",
                    },
                    {
                      offset: 0.8,
                      color: "#fff",
                    },
                    {
                      offset: 1,
                      color: "#fff",
                    },
                  ],
                },
                borderColor: "rgba(0, 149, 77, 1)",
                borderWidth: 2,
              },
            },
            data: this.value[0],
          },
          {
            name: this.legend[1],
            type: "line",
            // smooth: true, //是否平滑
            showAllSymbol: true,
            symbol: "circle",
            symbolSize: 6,
            lineStyle: {
              normal: {
                color: "rgba(220, 104, 41, 1)",
                shadowColor: "rgba(0, 0, 0, .3)",
                shadowBlur: 0,
                // shadowOffsetY: 5,
                // shadowOffsetX: 5,
              },
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "rgba(220, 104, 41, 1)",
              },
            },

            itemStyle: {
              color: "rgba(220, 104, 41, 1)",
              borderColor: "#fff",
              borderWidth: 3,
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
            // tooltip: {
            //   show: false,
            // },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(220, 104, 41, 0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(220, 104, 41, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(220, 104, 41, 0.9)",
                shadowBlur: 20,
              },
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(220, 104, 41, 1)",
                    },
                    {
                      offset: 0.4,
                      color: "rgba(220, 104, 41, 1)",
                    },
                    {
                      offset: 0.5,
                      color: "#fff",
                    },
                    {
                      offset: 0.7,
                      color: "#fff",
                    },
                    {
                      offset: 0.8,
                      color: "#fff",
                    },
                    {
                      offset: 1,
                      color: "#fff",
                    },
                  ],
                },
                borderColor: "rgba(220, 104, 41, 1)",
                borderWidth: 2,
              },
            },
            data: this.value[1],
          },
        ],
      };
      this.chart.setOption(this.option);
    },
    //调用图表切换legend
    toggleLegend(toggleIndex) {
      this.chart.dispatchAction({
        type: "legendToggleSelect",
        // 图例名称
        name: this.legend[toggleIndex].name,
      });
    },
    //图表全选
    legendAllSelect() {
      this.chart.dispatchAction({
        type: "legendAllSelect",
      });
    },
  },
  mounted() {
    this.chart = echarts.init(this.$refs.line);
    this.setOptions();
    window.onresize = () => {
      this.chart.resize();
    };
  },
};
</script>

<style lang="scss" scoped>
.line-wrap {
  width: 100%;
}
.line {
  width: 100%;
  margin: 0 auto;
  height: 100%;
}
</style>